<template>
  <div style="width: 100%">
    <el-date-picker
      v-model="date"
      @change="onChange"
      style="width: 100%"
      format="DD/MM/YYYY"
      type="date"
    />
  </div>
</template>
<script>
import { ref, watch } from 'vue'
import app from "@/app"

export default {
  props: ['modelValue'],
  setup(props, { emit }) {
    // 日期
    const date = ref(null)

    // 格式化
    const format = () => {
      date.value = props.modelValue ? app.time.get(props.modelValue) : null
    }

    // 更新
    const onChange = () => {
      emit('update:modelValue', app.time.unix(date.value))
    }

    // 执行格式化
    format()

    // 监听数据传入
    watch(() => props.modelValue, format)

    return {
      lang: app.lang,
      date,
      onChange
    }
  }
}
</script>